<template>
  <view class="upload-main">
    <view class="imgs">
      <!-- :style="{ width: imgSize+'px', height: imgSize+'px' }" -->
      <view class="img aspectRatio" v-for="(item,index) in imgs" :key="index" :class="{ shape: shape && shape=='circle' }">
        <image :src="item.pictureUrl?item.pictureUrl:item" mode="aspectFill" @click="screenallView(imgsView,index)" lazy-load="true" />
        <!-- 删除 -->
        <view class="delect" @click.stop="delect(index)" v-if="showAdd">×</view>
      </view>

      <view class="img aspectRatio" :style="plusStyle" @click="exampleUploadFn" v-if="showAdd" :class="{ shape: shape && shape=='circle' }">
        <view class="icon">
          <uv-icon :name="props.icon?props.icon:'plus'" :color="iconColor" :size="props.iconSize?props.iconSize: 22"></uv-icon>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import auth from "@/utils/auth";
import useCounterStore from "@/stores/counter";
import utils from "@/utils/utils";
const counter = useCounterStore();

let props = defineProps([
  "iconSize",
  "maxCount",
  "size",
  "shape",
  "valType",
  "modelValue",
  "preview",
  "background",
  "iconColor",
  "icon",
  "ruquest",
]);

const emit = defineEmits(["update:modelValue"]);

let imgs = ref([]);

let plusStyle = computed(() => {
  let obj = {
    background: props.background ? props.background : "#fbfdff",
  };
  if (props.size) obj["width"] = props.size + "px";
  return obj;
});

let limitNum = computed(() => {
  return props.maxCount ? props.maxCount : 1;
});

let showAdd = computed(() => {
  if (imgs.value.length >= limitNum.value) return false;
  if (props.preview && props.preview == 1) return false;
  return true;
});

let imgSize = computed(() => {
  if (props.size) {
    return props.size;
  } else {
    //移动端
    return 80;
  }
});

let iconColor = computed(() => {
  return props.iconColor ? props.iconColor : "#8c939d";
});

let imgsView = computed(() => {
  if (props.valType == "arr") {
    return imgs.value;
  } else {
    let arr = [];
    imgs.value.forEach((element) => {
      arr.push(element.pictureUrl);
    });
    return arr;
  }
});

async function exampleUploadFn() {
  let resp = await auth.chooseImage(limitNum.value);
  let imgsArr = [...imgs.value];
  if (imgsArr.length + resp.length > limitNum.value) {
    return uni.showToast({
      icon: "none",
      title: `最多只能上传${limitNum.value}张图片`,
    });
  }
  //拿到选择的图片，是一个数组
  uni.showLoading({
    title: "图片上传中",
  });
  for (let index = 0; index < resp.length; index++) {
    const element = resp[index];
    let img = await uploadFile(element);
    imgsArr.push(img);
  }
  uni.hideLoading();
  imgsArr = imgsArr.filter(Boolean);
  imgs.value = [...imgsArr];
}
async function uploadFile(element) {
  let resp = await counter.uploadFile(element, props.ruquest);
  if (resp.url) return resp.url;
  return resp;
}
function screenallView(imgcont, index) {
  uni.previewImage({
    current: index,
    urls: imgcont, //['你的图片地址']
    indicator: "number",
    loop: true,
  });
}
function delect(index) {
  imgs.value.splice(index, 1);
}

// 当值发生变化，更新值
watch(
  () => props.modelValue,
  (newValue, oldValue) => {
    let arr = [...imgs.value];
    if (newValue) {
      if (
        ["arrJson", "arr"].includes(props.valType) &&
        newValue.length &&
        !utils.isObjectValueEqual(newValue, arr)
      ) {
        imgs.value = [...newValue];
      }
    }
  },
  { immediate: true, deep: true }
);

watch(
  () => imgs.value,
  (newValue, oldValue) => {
    if (newValue) {
      if (["arrJson", "arr"].includes(props.valType)) {
        emit("update:modelValue", newValue);
      } else {
        emit("update:modelValue", newValue.toString());
      }
    }
  },
  { deep: true, immediate: true }
);

defineExpose({ exampleUploadFn });
</script>

<style lang="scss" scoped>
.upload-main {
  width: 100%;
}
.imgs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0px, 1fr));
  gap: 10px 10px;
}
.shape {
  border-radius: 50% !important;
}
.img {
  background-color: #f6f6f6;
  border: 1px dashed #f6f6f6;
  border-radius: 5px;
  box-sizing: border-box;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  flex-shrink: 0;
  image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .delect {
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    font-size: 15px;
    background-color: rgba(255, 255, 255, 0.7);
    user-select: none;
  }
  .delect:hover {
    background-color: rgba(31, 31, 31, 0.5);
    color: white;
  }
}
</style>
